<template>
	<view>
		<u-navbar back-text="" back-icon-color="#000000" :border-bottom="false" title-color="#000000" :background="background"></u-navbar>
		<view class="top">
			<view class="left"></view>
			<view class="right">
				<view class="name">
					{{name}}
				</view>
				<view class="text">
					{{ename}}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list" :class="'list'+index" v-for="(item,index) in dataList" :key="index">
				<u-sticky bgColor="transparent">
					<view class="title">
						<view class="icon">
							{{getNumber(index)}}
						</view>
						<view class="name">
							{{item.title}}
						</view>
					</view>
				</u-sticky>
				<view class="down" :style="dataList.length==(index+1)?'border: 0;':''">
					<u-parse :html="item.content"></u-parse>
				</view>
			</view>
		</view>
		<view class="button">
			<u-button :loading="loading" @click="go" shape="circle" :hairLine="false" class="u-button">
				{{text}}
			</u-button>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				name: "",
				ename: '',
				study_id: 0,
				dataList: [],
				background: {
					'background': '#FFC31E'
				},
				loading: true,
				text: "X恭喜学完本教程，快来打卡确认吧~"
			}
		},
		onLoad(option) {
			than = this;
			than.study_id = option.study_id;
			var i = 15
			var text = than.text;
			than.text = text.replace(/x|X/, i);
			var clock = null;
			clearInterval(clock);
			clock = setInterval(function() {
				i--
				than.text = text.replace(/x|X/, i);
				if (i  == 0) {
					than.loading = false;
					than.text = than.text.substring(1, than.text.length)
					clearInterval(clock);
				}
			}, 1000)
			than.post("api/study/studyDetails", {
				study_id: than.study_id
			}, function(data) {
				than.name = data.name
				than.ename = data.ename
				than.dataList = data.list;
			})
		},
		methods: {
			getNumber(text) {
				var number;
				text += 1;
				if (text < 10) {
					number = "0" + text
				} else {
					number = text
				}
				return number
			},
			go() {
				than.post("api/study/giveRewardGdb", {
					study_id: than.study_id
				}, function(data) {
					than.toast('成功')
					setTimeout(function() {
						uni.navigateBack();
					}, 1500);
				})
			}
		}
	}
</script>

<style lang="less">
	p{
		line-height: 50rpx;
	}
	.button {
		padding-bottom: 50rpx;

		.u-button {
			width: 632rpx;
			height: 82rpx;
			border: 0;
			background: linear-gradient(180deg, #FDF7E9, #F7E4BE);
			box-shadow: 0px 4rpx 12rpx 0px rgba(94, 90, 88, 0.08);
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #835529;
		}
	}

	.content {
		position: relative;
		z-index: 2;
		background: #FFFFFF;
		border-radius: 70rpx 0rpx 0rpx 0rpx;
		top: -80rpx;

		.list {
			.title {
				display: flex;
				align-items: center;
				background: #FFFFFF;
				height: 120rpx;
				padding: 0 36rpx;
				border-radius: 70rpx 0rpx 0rpx 0rpx;

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 22rpx;
					font-size: 40rpx;
					font-family: DIN Medium;
					font-weight: 400;
					color: #FFFFFF;
				}

				.name {
					width: 560rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #202A36;
				}
			}

			.down {
				margin: 0 35rpx 0 66rpx;
				padding-left: 51rpx;

				.text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 42rpx;

					text {
						color: red;
					}
				}

				.long {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 42rpx;

					text {
						color: #F68649;
					}
				}

				.image {
					margin-top: 33rpx;

					image {
						width: 575rpx;
						height: 506rpx;
					}
				}
			}
		}

		.list0 {
			.title {
				.icon {
					background: #F6C749;
				}
			}

			.down {
				border-left: 5rpx solid #F6C749;
			}
		}

		.list1 {
			.title {
				.icon {
					background: #F68649;
				}
			}

			.down {
				border-left: 5rpx solid #F6C749;
			}
		}

		.list2 {
			.title {
				.icon {
					background: #EC4B43;
				}
			}

			.down {
				border-left: 5rpx solid #EC4B43;
			}
		}

		.list3 {
			.title {
				.icon {
					background: #855ABF;
				}
			}

			.down {
				border-left: 5rpx solid #855ABF;
			}
		}

		.list4 {
			.title {
				.icon {
					background: #2A61F1;
				}
			}

			.down {
				border-left: 5rpx solid #2A61F1;
			}
		}

		.list5 {
			.title {
				.icon {
					background: #5ABF79;
				}
			}

			.down {
				border-left: 5rpx solid #5ABF79;
			}
		}

		.list6 {
			.title {
				.icon {
					background: #43DEEC;
				}
			}

			.down {
				border-left: 5rpx solid #43DEEC;
			}
		}

		.list7 {
			.title {
				.icon {
					background: #EC43C2;
				}
			}

			.down {
				border-left: 5rpx solid #EC43C2;
			}
		}

		.list8 {
			.title {
				.icon {
					background: #EC4343;
				}
			}

			.down {
				border-left: 5rpx solid #EC4343;
			}
		}

		.list9 {
			.title {
				.icon {
					background: #FEC31D;
				}
			}

			.down {
				border-left: 5rpx solid #FEC31D;
			}
		}
		
		.list10 {
			.title {
				.icon {
					background: #F6C749;
				}
			}
		
			.down {
				border-left: 5rpx solid #F6C749;
			}
		}
		
		.list11 {
			.title {
				.icon {
					background: #F68649;
				}
			}
		
			.down {
				border-left: 5rpx solid #F6C749;
			}
		}
		
		.list12 {
			.title {
				.icon {
					background: #EC4B43;
				}
			}
		
			.down {
				border-left: 5rpx solid #EC4B43;
			}
		}
		
		.list13 {
			.title {
				.icon {
					background: #855ABF;
				}
			}
		
			.down {
				border-left: 5rpx solid #855ABF;
			}
		}
		
		.list14 {
			.title {
				.icon {
					background: #2A61F1;
				}
			}
		
			.down {
				border-left: 5rpx solid #2A61F1;
			}
		}
		
		.list15 {
			.title {
				.icon {
					background: #5ABF79;
				}
			}
		
			.down {
				border-left: 5rpx solid #5ABF79;
			}
		}
		
		.list16 {
			.title {
				.icon {
					background: #43DEEC;
				}
			}
		
			.down {
				border-left: 5rpx solid #43DEEC;
			}
		}
		
		.list17 {
			.title {
				.icon {
					background: #EC43C2;
				}
			}
		
			.down {
				border-left: 5rpx solid #EC43C2;
			}
		}
		
		.list18 {
			.title {
				.icon {
					background: #EC4343;
				}
			}
		
			.down {
				border-left: 5rpx solid #EC4343;
			}
		}
		
		.list19 {
			.title {
				.icon {
					background: #FEC31D;
				}
			}
		
			.down {
				border-left: 5rpx solid #FEC31D;
			}
		}
	}

	.top {
		height: 300rpx;
		background: #FFC31E;
		display: flex;
		padding: 0 66rpx;
		position: relative;
		z-index: 1;

		.left {
			width: 5rpx;
			height: 126rpx;
			background: linear-gradient(0deg, #2F2B1C, #615633);
		}

		.right {
			margin-left: 49rpx;

			.name {
				font-size: 72rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: bold;
				color: #222222;
				line-height: 1;
			}

			.text {
				margin-top: 20rpx;
				line-height: 1;
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666B71;
			}
		}
	}
</style>
